<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${BaseContext }">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/bootstrap-select.css">
<link rel="stylesheet" href="assets/css/courseTable.css">
<!-- 引入JQuery  bootstrap.js-->
<script src="static/js/jquery-3.2.1.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-select.js"></script>
<script src="static/js/defaults-zh_CN.js"></script>
</head>
<body>
	<!-- 顶栏  -->
	<jsp:include page="include/top.jsp"></jsp:include>
	<div class="container" id="content">
		<div class="row">
			<!-- 菜单 -->
			<jsp:include page="include/menu.jsp"></jsp:include>
			<div class="col-md-10">
				<div class="panel panel-default">
					<div class="panel-heading">
						<a href="admin/index.do">首页</a> / <a href="admin/manageCourseSchedule.do">课程管理</a> / <a href="javascript:;">课程表信息</a>
					</div>
				<div class="panel-body">
					<table class="schedule" border="1" bordercolor="#ccc"
						cellspacing="0">
						<caption>
							<input type="hidden" name="tId" value="${tId }">
							<span>教师编号：${tId }</span>&nbsp;&nbsp;&nbsp;&nbsp; <span>教师姓名：${tName }</span>&nbsp;&nbsp;&nbsp;&nbsp; <span>所属专业：${tGradeName }</span>
						</caption>
						<tr>
							<th class="col-a" colspan="2"></th>
							<th class="col-b" colspan="2">星期一</th>
							<th class="col-b" colspan="2">星期二</th>
							<th class="col-b" colspan="2">星期三</th>
							<th class="col-b" colspan="2">星期四</th>
							<th class="col-b" colspan="2">星期五</th>
							<th class="col-b" colspan="2">星期六</th>
							<th class="col-b" colspan="2">星期日</th>
						</tr>
						<tr>
							<td class="td-head-1" rowspan="2">上午</td>
							<td class="td-head-2">一</td>
							<c:if test="${not empty courseList1 }">
								<c:forEach items="${courseList1 }" var="course1" varStatus="i">
									<td ctime="1" cweek="${i.count }" cname="${course1.cname }" clocation="${course1.clocation }"
										colspan="2" class="td-course">
										<c:if test="${not empty course1.cname }">
											${course1.cname }<br>周${course1.cweek }，第${course1.ctime }大节<br>${course1.clocation }
										</c:if>
									</td>
								</c:forEach>
							</c:if>
							<c:if test="${empty courseList1 }">
								<c:forEach begin="1" end="7" varStatus="i">
									<td ctime="1" cweek="${i.count }" cname="" clocation=""
										colspan="2" class="td-course">
									</td>
								</c:forEach>
							</c:if>
						</tr>
						<tr>
							<td class="td-head-2">二</td>
							<c:if test="${not empty courseList2 }">
								<c:forEach items="${courseList2 }" var="course2" varStatus="i">
									<td ctime="2" cweek="${i.count }" cname="${course2.cname }" clocation="${course2.clocation }"
										colspan="2" class="td-course">
										<c:if test="${not empty course2.cname }">
											${course2.cname }<br>周${course2.cweek }，第${course2.ctime }大节<br>${course2.clocation }
										</c:if>
									</td>
								</c:forEach>
							</c:if>
							<c:if test="${empty courseList2 }">
								<c:forEach begin="1" end="7" varStatus="i">
									<td ctime="2" cweek="${i.count }" cname="" clocation=""
										colspan="2" class="td-course">
									</td>
								</c:forEach>
							</c:if>
						</tr>

						<tr>
							<td class="td-head-1" rowspan="2">下午</td>
							<td class="td-head-2">三</td>
							<c:if test="${not empty courseList3 }">
								<c:forEach items="${courseList3 }" var="course3" varStatus="i">
									<td ctime="3" cweek="${i.count }" cname="${course3.cname }" clocation="${course3.clocation }"
										colspan="2" class="td-course">
										<c:if test="${not empty course3.cname }">
											${course3.cname }<br>周${course3.cweek }，第${course3.ctime }大节<br>${course3.clocation }
										</c:if>			
									</td>
								</c:forEach>
							</c:if>
							<c:if test="${empty courseList3 }">
								<c:forEach begin="1" end="7" varStatus="i">
									<td ctime="3" cweek="${i.count }" cname="" clocation=""
										colspan="2" class="td-course">
									</td>
								</c:forEach>
							</c:if>
						</tr>
						<tr>
							<td class="td-head-2">四</td>
							<c:if test="${not empty courseList4 }">
								<c:forEach items="${courseList4 }" var="course4" varStatus="i">
									<td ctime="4" cweek="${i.count }" cname="${course4.cname }" clocation="${course4.clocation }"
										colspan="2" class="td-course">
										<c:if test="${not empty course4.cname }">
											${course4.cname }<br>周${course4.cweek }，第${course4.ctime }大节<br>${course4.clocation }
										</c:if>		
									</td>
								</c:forEach>
							</c:if>
							<c:if test="${empty courseList4 }">
								<c:forEach begin="1" end="7" varStatus="i">
									<td ctime="4" cweek="${i.count }" cname="" clocation=""
										colspan="2" class="td-course">
									</td>
								</c:forEach>
							</c:if>
						</tr>
						<tr>
							<td class="td-head-1">晚上</td>
							<td class="td-head-2">五</td>
							<c:if test="${not empty courseList5 }">
								<c:forEach items="${courseList5 }" var="course5" varStatus="i">
									<td ctime="5" cweek="${i.count }" cname="${course5.cname }" clocation="${course5.clocation }"
										colspan="2" class="td-course">
										<c:if test="${not empty course5.cname }">
											${course5.cname }<br>周${course5.cweek }，第${course5.ctime }大节<br>${course5.clocation }
										</c:if>		
									</td>
								</c:forEach>
							</c:if>
							<c:if test="${empty courseList5 }">
								<c:forEach begin="1" end="7" varStatus="i">
									<td ctime="5" cweek="${i.count }" cname="" clocation=""
										colspan="2" class="td-course">
									</td>
								</c:forEach>
							</c:if>
						</tr>
					</table>
				</div>
					<button type="button" class="btn btn-primary"
						onclick="setCourse(${tId });">确认</button>

					<!-- 安排课程modal -->
					<div class="modal fade" id="courseModal" tabindex="-1"
						role="dialog" aria-labelledby="exampleModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4 class="modal-title">设置课程信息</h4>
								</div>
								<div class="modal-body">
									<!-- 确认课程信息 -->
									<div class="form-group">
										<label class="control-label">课程时间：</label> <input type="text"
											class="form-control" name="courseTime" id="courseTime"
											readonly="readonly">
									</div>
									<div class="form-group">
										<label class="control-label">课程名称：</label> <input type="text"
											class="form-control" name="courseName" id="courseName">
									</div>
									<div class="form-group">
										<label class="control-label">上课地点：</label> <input type="text"
											class="form-control" name="courseLocation"
											id="courseLocation">
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-primary"
										onclick="confirmCourse();">确认</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal-dialog -->
					</div>
					<!-- /.modal -->

				</div>

			</div>
		</div>
	</div>
	</div>
	<!-- footer -->
	<jsp:include page="include/footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
	$("#nav li:nth-child(3)").addClass("active");
</script>

<script type="text/javascript">
	$(function(){
		//为每一个时间段的课程的td添加点击事件
		$(".td-course").each(function(){
			$(this).click(function(){
				var ctime = $(this).attr('ctime');
				var cweek = $(this).attr('cweek');
				/* alert(courseTime[0]+':::'+courseTime[1]); */
				var cname = $(this).attr('cname');
				var clocation = $(this).attr('clocation');
				//课程时间
				var courseTime = '周'+cweek+'，第'+ctime+'大节';
				/* alert(courseTime); */
				//modal中写课程时间
				$('#courseTime').val(courseTime);
				$('#courseName').val(cname);
				$('#courseLocation').val(clocation);
				$('#courseTime').attr('cweek',cweek);
				$('#courseTime').attr('ctime',ctime);
				$('#courseModal').modal('toggle');
			});
		});
	});
	//页面设置当前时间段的课程信息
	function confirmCourse(){
		//如果原本有信息，将信息显示，如果没有，input框显示为空
		var courseTime = $('#courseTime').val();
		var cweek = $('#courseTime').attr('cweek');
		var ctime = $('#courseTime').attr('ctime');
		var cname = $('#courseName').val();
		var clocation = $('#courseLocation').val();
		var courseContent = cname+'<br>'+courseTime+'<br>'+clocation;
		var courseTime = ctime+','+cweek;
		//关闭模态框，将课程信息显示在table中
		$('td[ctime$="'+ctime+'"][cweek$="'+cweek+'"]').html(courseContent);
		//设置课程信息
		$('td[ctime$="'+ctime+'"][cweek$="'+cweek+'"]').attr('cname',cname);
		$('td[ctime$="'+ctime+'"][cweek$="'+cweek+'"]').attr('clocation',clocation);
		$('#courseModal').modal('hide');
	}

	//提交确认设置当前教师课程-->点击确认按钮，遍历每个课程td，获取每个td的coursetime、coursename、courselocation属性
	//封装到一个map中，将map添加到list中，继续遍历下一个td，获取对应属性，封装对象，push()方法添加到list中
	//前台设置格式为：{'tId':[{dayBean},{dayBean},{dayBean},{dayBean},...]}
	//后台接收格式为String类型，通过JSONObject.parse()将json格式的字符串转换为map类型
	function setCourse(tid){
		var list_map = new Array();
		$(".td-course").each(function(){
			var map = {};
			map['ctime'] = $(this).attr('ctime');
			map['cweek'] = $(this).attr('cweek');
			map['cname'] = $(this).attr('cname');
			map['clocation'] = $(this).attr('clocation');
			list_map.push(map);
		});
		//封装最终课程信息格式为json对象格式
		var courseData = {};
		courseData[tid] = list_map;
		console.log(JSON.stringify(courseData));
		var data = JSON.stringify(courseData);
		$.post('admin/coursePlan.do',{courseData:data,tId:tid},function(data){
			if(data.success){
				window.location.href='admin/manageCourseSchedule.do';
			}
		},'json');
	}
</script>
</html>